import 'package:flutter/material.dart';

void main() {
  // 1.运行应用程序
  runApp(const MaterialApp(home: Main()));
}

class Main extends StatelessWidget {
  const Main({super.key});
  static const List mylist = [
    {
      "createTime": "2021-05-15 21:49:48",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      "name": "茶水分离杯耐热隔热玻璃杯",
      "totalNum": 1,
      "curPrice": 119.5,
      "totalMoney": 119.5,
      "attrsText": "规格:白色240ml "
    },
    {
      "createTime": "2021-08-21 19:05:47",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/f899c55f36cb74232abb349234d9e676.png",
      "name": "儿童防污/防蚊T恤110cm",
      "totalNum": 1,
      "curPrice": 89.5,
      "totalMoney": 89.5,
      "attrsText": "颜色:白色柠檬（防污） 尺码:160cm "
    },
    {
      "createTime": "2021-08-15 12:33:54",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/dcd0937695ffd65053adfac36b79517e.jpg",
      "name": "【包邮】冰与火的碰撞威士忌杯2支装水杯",
      "totalNum": 1,
      "curPrice": 39.5,
      "totalMoney": 39.5,
      "attrsText": "规格:基础款复古菱纹2只（国产） "
    },
    {
      "createTime": "2021-07-23 00:01:09",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg",
      "name": "德国百年工艺高端水晶玻璃红酒杯2支装",
      "totalNum": 1,
      "curPrice": 139.5,
      "totalMoney": 139.5,
      "attrsText": "规格:白葡萄酒杯双杯 "
    },
    {
      "createTime": "2021-05-17 10:59:13",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/c327b313314b9362ce9f49b253b0b61c.png",
      "name": "网易智造零感蓝牙耳机",
      "totalNum": 1,
      "curPrice": 59.5,
      "totalMoney": 59.5,
      "attrsText": "颜色:幻夜灰 "
    }
  ];
  @override
  Widget build(BuildContext context) {
    // 2.构建应用程序界面
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '案例-商品订单信息',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.black,
      ),
      // 中间内容
      body: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.black12,
        child: ListView.separated(
          itemBuilder: (BuildContext context, int index) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                // yi
                Row(
                  // 主轴对齐方式：两边对齐
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(mylist[index]['createTime']),
                    const Text(
                      '代发货',
                      style: TextStyle(color: Colors.amber),
                    ),
                  ],
                ),
                const SizedBox(height: 10), // 充当 margin 角色
                // er
                Row(
                  // 纵轴对齐方式：从上到下
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Image.network(
                      mylist[index]['image'],
                      // 'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg',
                      height: 100,
                      width: 100,
                    ),
                    const SizedBox(
                      width: 10,
                    ), // 充当 margin 角色
                    Expanded(
                      child: SizedBox(
                        height: 100,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              mylist[index]['name'],
                              // '茶水分离杯耐热隔热玻璃杯茶茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯',
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                            Container(
                              padding: const EdgeInsets.symmetric(
                                  vertical: 2, horizontal: 5),
                              decoration: BoxDecoration(
                                  color: Colors.white54,
                                  borderRadius: BorderRadius.circular(5)),
                              child: Text(
                                mylist[index]['attrsText'],
                                style: const TextStyle(
                                  color: Colors.grey,
                                ),
                              ),
                            ),
                            Text('¥${mylist[index]['curPrice']}'),
                          ],
                        ),
                      ),
                    ),
                    const Text(
                      'x2',
                      style: TextStyle(height: 3),
                    )
                  ],
                ),
                // 底部合计 + 按钮
                const Text('合计：¥239.00'),
                const SizedBox(
                  height: 10,
                ),
                // 按钮
                Row(
                  mainAxisSize: MainAxisSize.min, // 根据内容调整宽度
                  children: [
                    ElevatedButton(onPressed: () {}, child: const Text('查看详情')),
                    const SizedBox(
                      width: 10,
                    ),
                    FilledButton(onPressed: () {}, child: const Text('再次购买')),
                  ],
                ),
              ],
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return Container(
              height: 1,
              margin: const EdgeInsets.symmetric(vertical: 10),
              color: Colors.grey,
            );
          },
          itemCount: mylist.length
        ),
      ),
    );
  }
}
